<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    index: { type: Number, required: true },
    keyList: { type: Array, required: true },
    info: { type: Object, required: true },
  },
});
</script>

<template>
  <view class="contacts-item">
    <view class="contacts-item-index">出行人{{ index }}</view>
    <view class="contacts-item-content">
      <view class="contacts-item-text">
        {{ keyList.includes("name") ? info.name : "" }}
        {{ keyList.includes("phone") ? info.phone : "" }}
      </view>
      <template v-if="keyList.includes('cardNo')">
        <view class="contacts-item-text" v-if="info.cardNo">
          {{ info.identity_type_name }}：{{ info.cardNo_str }}
        </view>
        <view class="contacts-item-text2" v-else>
          需补充出行人证件号码信息
        </view>
      </template>
    </view>
  </view>
</template> 

<style lang="scss">
.contacts-item {
  display: flex;
  align-items: flex-start;

  .contacts-item-index,
  .contacts-item-text,
  .contacts-item-text2 {
    font-size: 28rpx;
    color: #666666;
    line-height: 50rpx;
  }

  .contacts-item-index {
    flex-shrink: 0;
  }

  .contacts-item-content {
    flex-grow: 1;
    min-width: 0;
    margin-left: 50rpx;
  }

  .contacts-item-text {
    color: #2d2d2d;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .contacts-item-text2 {
    color: #ee0a24;
  }
}
</style>
